<!-- CustomInfoWindow.vue -->
<template>
  <div class="custom-info-window">
    <div class="header">
      <h3>{{ title }}</h3>
      <button class="close-btn" @click="$emit('close')">×</button>
    </div>
    <div class="content">
      <p>{{ content }}</p>
      <button @click="handleActionClick" class="action-btn">查看详情</button>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  title: String,
  content: String,
  // 可以传递任意你需要的数据
  markerData: Object
});

const emit = defineEmits(['close', 'action-click']);

const handleActionClick = () => {
  emit('action-click', props.markerData); // 可以向父组件传递数据
};
</script>

<style scoped>
.custom-info-window {
  width: 280px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background-color: #409eff;
  color: white;
}
.close-btn { /* 样式略 */ }
.action-btn { /* 样式略 */ }
</style>